<template>
  <d2-container class="page">
    <div class="page-form">
      <el-form :inline="true" :model="queryForm">
        <el-form-item label="字典名称">
          <el-input v-model="queryForm.name" placeholder="请输入" clearable></el-input>
        </el-form-item>
        <el-form-item label="字典类型">
          <el-input v-model="queryForm.type" placeholder="请输入" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="page-table">
      <d2-crud
        :loading="loading"
        :columns="tableColumns"
        :data="tableData"
        :rowHandle="rowHandle"
        :pagination="pagination"
        @update="onUpdate"
        @pagination-current-change="pageChange"
      />
    </div>

    <!--修改-->
    <dictionary-update
      v-if="visibleUpdate"
      :info="currRow"
      :visible="visibleUpdate"
      @cancel="cancelUpdate"
      @submit="submitUpdate"
    />
  </d2-container>
</template>

<script>
import DictionaryUpdate from './dictionary-update'
import DictionaryType from './components/dictionary-type'
import { mapActions } from 'vuex'

const tableColumns = [
  { title: '字典名称', key: 'name' },
  { title: '字典类型', key: 'type', component: { name: DictionaryType } },
  { title: '排序', key: 'orderNum' },
  { title: '备注', key: 'remark' }
]
const rowHandle = {
  width: 100,
  custom: [
    { text: '修改', type: 'primary', size: 'small', emit: 'update' }
  ]
}
export default {
  name: 'dictionary',
  data () {
    return {
      visibleAdd: false,
      visibleUpdate: false,
      loading: false,
      currRow: null,
      queryForm: {
        name: '',
        type: '',
        page: 1,
        limit: 10
      },
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      tableColumns,
      rowHandle,
      tableData: []
    }
  },
  components: {
    DictionaryUpdate,
    DictionaryType
  },
  mounted () {
    this.queryList()
  },
  methods: {
    ...mapActions('d2admin/pm.dictionary', [
      'dictList',
      'dictDelete'
    ]),
    // 查询列表
    queryList () {
      this.loading = true
      this.dictList(this.queryForm).then(
        res => {
          this.loading = false
          this.tableData = res.list
          this.pagination.total = res.totalCount
        }
      ).catch(err => {
        this.loading = false
      })
    },
    // 其他用途调用
    queryHandle (page) {
      this.pagination.currentPage = page
      this.queryForm.page = page
      this.queryList()
    },
    // 切换分页
    pageChange (curr) {
      this.queryHandle(curr)
    },
    // 查询按钮
    onSubmit () {
      this.queryHandle(1)
    },
    // 修改
    onUpdate ({ index, row }) {
      this.currRow = row
      this.visibleUpdate = true
    },
    // 取消修改操作
    cancelUpdate (visible) {
      this.visibleUpdate = visible
    },
    // 提交修改操作
    submitUpdate (visible) {
      this.visibleUpdate = visible
      this.queryHandle(1)
    }
  }
}
</script>

<style lang="scss" scoped>
  .page {
    .page-form {
      border: 1px solid #eee;
      padding: 20px 20px 0;
    }
    .page-table {
      border: 1px solid #eee;
      padding: 20px;
      margin-top: 20px;
    }
  }
</style>

